<template>
  <div class="profile">
    <h1>个人中心</h1>
    
    <div class="profile-container">
      <div class="user-info">
        <div class="avatar-section">
          <div class="avatar">
            <img v-if="user.avatar" :src="user.avatar" alt="用户头像">
            <div v-else class="avatar-placeholder" v-text="user.username.charAt(0)"></div>
          </div>
          <button @click="changeAvatar" class="change-avatar-btn">更换头像</button>
        </div>
        
        <div class="user-details">
          <div class="detail-item">
            <label>用户名:</label>
            <span v-text="user.username"></span>
          </div>
          <div class="detail-item">
            <label>手机号:</label>
            <span v-text="user.phone"></span>
          </div>
          <div class="detail-item">
            <label>邮箱:</label>
            <span v-text="user.email"></span>
          </div>
          <div class="detail-item">
            <label>会员等级:</label>
            <span class="membership" v-text="user.membershipLevel"></span>
          </div>
          <div class="detail-item">
            <label>积分:</label>
            <span class="points"><span v-text="user.points"></span> 分</span>
          </div>
        </div>
      </div>
      
      <div class="profile-sections">
        <div class="section">
          <h2>我的优惠券</h2>
          <div v-if="coupons.length > 0" class="coupons-list">
            <div v-for="coupon in coupons" :key="coupon.id" class="coupon-card" :class="coupon.status">
              <div class="coupon-info">
                <h3 v-text="coupon.name"></h3>
                <p>优惠金额: ¥<span v-text="coupon.discount"></span></p>
                <p>有效期至: <span v-text="coupon.expiryDate"></span></p>
              </div>
              <div class="coupon-status">
                <span v-if="coupon.status === 'available'" class="status-available">可使用</span>
                <span v-else-if="coupon.status === 'used'" class="status-used">已使用</span>
                <span v-else class="status-expired">已过期</span>
              </div>
            </div>
          </div>
          <div v-else class="no-coupons">
            <p>暂无优惠券</p>
          </div>
        </div>
        
        <div class="section">
          <h2>收货地址</h2>
          <div class="addresses">
            <div v-for="address in addresses" :key="address.id" class="address-card">
              <div class="address-info">
                <p class="address-name"><span v-text="address.name"></span> <span v-text="address.phone"></span></p>
                <p class="address-detail" v-text="address.detail"></p>
              </div>
              <div class="address-actions">
                <button @click="editAddress(address)" class="edit-btn">编辑</button>
                <button @click="deleteAddress(address)" class="delete-btn">删除</button>
              </div>
            </div>
            <button @click="addAddress" class="add-address-btn">+ 添加新地址</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { mockUser, mockCoupons, mockAddresses } from '../utils/mockData.js'

export default {
  name: 'Profile',
  setup() {
    // 使用模拟用户数据
    const user = ref(mockUser)
    
    // 使用模拟优惠券数据
    const coupons = ref(mockCoupons.map(coupon => ({
      ...coupon,
      status: coupon.status || 'available' // 默认状态为可使用
    })))
    
    // 使用模拟地址数据
    const addresses = ref(mockAddresses)
    
    const changeAvatar = () => {
      alert('更换头像功能')
    }
    
    const editAddress = (address) => {
      alert(`编辑地址: ${address.detail}`)
    }
    
    const deleteAddress = (address) => {
      alert(`删除地址: ${address.detail}`)
    }
    
    const addAddress = () => {
      alert('添加新地址')
    }
    
    return {
      user,
      coupons,
      addresses,
      changeAvatar,
      editAddress,
      deleteAddress,
      addAddress
    }
  }
}
</script>

<style scoped>
.profile {
  padding: 2rem 0;
}

.profile h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.profile-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
}

.user-info {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1.5rem;
}

.avatar-section {
  text-align: center;
  margin-bottom: 2rem;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  overflow: hidden;
  background-color: #42b983;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  font-weight: bold;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.change-avatar-btn {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.change-avatar-btn:hover {
  background-color: #359c6d;
}

.user-details .detail-item {
  display: flex;
  margin-bottom: 1rem;
}

.user-details label {
  width: 80px;
  font-weight: bold;
  color: #333;
}

.user-details span {
  flex: 1;
  color: #666;
}

.membership {
  color: #ffc107;
  font-weight: bold;
}

.points {
  color: #42b983;
  font-weight: bold;
}

.profile-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1.5rem;
}

.section h2 {
  margin-bottom: 1rem;
  color: #333;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}

.coupons-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.coupon-card {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 1rem;
  position: relative;
}

.coupon-card.available {
  border-color: #42b983;
  background-color: #f8fff9;
}

.coupon-card.used {
  border-color: #9e9e9e;
  background-color: #f5f5f5;
  opacity: 0.7;
}

.coupon-card.expired {
  border-color: #f44336;
  background-color: #fff8f8;
}

.coupon-info h3 {
  margin-bottom: 0.5rem;
  color: #333;
}

.coupon-info p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.coupon-status {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.status-available {
  color: #42b983;
  font-weight: bold;
}

.status-used {
  color: #9e9e9e;
  font-weight: bold;
}

.status-expired {
  color: #f44336;
  font-weight: bold;
}

.no-coupons {
  text-align: center;
  padding: 2rem;
  color: #666;
}

.addresses {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.address-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.address-info {
  flex: 1;
}

.address-name {
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.address-detail {
  color: #666;
}

.address-actions {
  display: flex;
  gap: 0.5rem;
}

.edit-btn, .delete-btn {
  padding: 0.3rem 0.6rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.edit-btn {
  background-color: #2196f3;
  color: white;
}

.edit-btn:hover {
  background-color: #1976d2;
}

.delete-btn {
  background-color: #f44336;
  color: white;
}

.delete-btn:hover {
  background-color: #d32f2f;
}

.add-address-btn {
  align-self: flex-start;
  background-color: #42b983;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-address-btn:hover {
  background-color: #359c6d;
}

@media (max-width: 768px) {
  .profile-container {
    grid-template-columns: 1fr;
  }
  
  .coupons-list {
    grid-template-columns: 1fr;
  }
}
</style>